import { user } from "@/api"
import { userStore } from "@/store"
import { format } from "path"
import { App } from "vue"
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
import LoginVue from "../views/Login/index.vue"
import { ElMessage } from 'element-plus'


const routes: RouteRecordRaw[] = [
    {
        path: "/login",
        name: "login",
        // 一般项目中第一个进入页面是不需要使用 路由懒加载的
        component: LoginVue
    },
    /*  {
         path: "/home",
         name: "home",
         // 一般项目中第一个进入页面是不需要使用 路由懒加载的
         component: () => import("../views/Home/index.vue"),
         children: [
             {
                 path: "/index",
                 name: "index",
                 component: () => import("../views/Index/index.vue")
             }
         ]
     } */
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 路由前置导航守卫
router.beforeEach((to, from, next) => {
    const store = userStore()

    let token = localStorage.getItem("token");
    // console.log(token);

    // 如果没有登录，只让用户访问 login
    if (!token && to.path !== "/login") {
        next("/login");
    }

    // 如果已经是登录状态，用户手动访问 /login  强制跳回  之前的页面
    else if (token && to.path === "/login") {
        // 强制跳转回 来的地方
        next(from.path);
    }

    // 无论是登录后还是刷新后，只要token还在就需要保持 用户的菜单数据还在
    // 让路由每次跳转的时候，都检查一下有没有菜单数据，若没有就需要重新请求
    else if (token && store.menus.length === 0 && router.getRoutes().length === 1 && (from.path === "/" || from.path === "/login")) {
        // 登录成功后，需要请求用户的菜单数据
        user.userInfoApi().then(res => {
            if (res.code === 200) {
                // 成功得到该用户所有的菜单数据
                // 把数据存到pinia
                store.menus = res.data.menus;
                // console.log("拿回了路由数据");
                // 为了不和store里面的数据冲突，把数据进行一份拷贝
                const menus: IMenu[] = JSON.parse(JSON.stringify(res.data.menus));
                // 现在直接使用 userStore.menu 进行生成动态路由
                const parents: IActiveMenu[] = menus.filter(
                    (menu) => menu.parentId === 0
                );
                menus.forEach((menu) => {
                    // p 就是就一级路由
                    const p = parents.find((p) => p.id === menu.parentId);
                    if (p) {
                        if (!p.children) {
                            p.children = [];
                        }
                        p.children.push(menu);
                    }
                });

                // 菜单数据回来了，可以生成动态路由了
                parents.forEach((parent) => {
                    const route: RouteRecordRaw = {
                        // parernt是一级菜单，一级菜单对应一级路由
                        path: "/" + parent.name,
                        name: parent.name,
                        // 注意:所有的一级路由其实都是对应home/index.vue
                        component: () => import("../views/Home/index.vue"),
                        children: [],
                        meta: {
                            title: parent.title,
                        },
                    };
                    // 添加子路由
                    parent.children?.forEach((child) => {
                        route.children.push({
                            path: `/${parent.name}/${child.name}`,
                            name: child.name,
                            component: () => import(`../views/${parent.name}/${child.name}.vue`),
                            meta: {
                                title: child.title,
                            },
                        })
                    })
                    // addRoute方法添加路由配置不是同步生效的，需要我们等等再进入
                    router.addRoute(route)
                })
                router.addRoute({
                    path: "/",
                    name: "home",
                    redirect: "/index",
                    component: () => import("../views/Home/index.vue"),
                    children: [
                        {
                            path: "/index",
                            name: "index",
                            component: () => import("../views/index/index.vue"),
                        },
                    ],
                });
                // to.path 去哪里
                next(to.fullPath);
                // from.path === "/login" ? next() : next(to.path);
            }
        })
    }



    // 要在登录成功后，动态地生成 当前用户能访问的路由
    // 什么时候是用户登录成功了？ 1. token存在, 2. store里面的menus有数据
    // 但是为了避免 切换路由的时候，重复地进入这个判断，我们需要在只有是登录后 或者是 刷新后 才进入生成动态路由
    // else if (token && store.menus.length === 0 && from.path === "/login") {
    //     //   需要需要动态生成路由了 - addRoute方法专门用来动态添加路由配置的
    //     //   我们要向里面添加的路由对象，要长成下面这样
    //     //   {
    //     //       path: "/ums",
    //     //       name: "ums",
    //     //       component: () => import("../views/Home/index.vue"),
    //     //       children: [
    //     //           {
    //     //               path: '/ums/admin',
    //     //               name : 'admin',
    //     //               component : () => import("../views/ums/admin.vue"
    //     //           }
    //     //       ],
    //     //     }
    //     user.userInfoApi().then((res) => {
    //         if (res.code === 200) {
    //             // 得到了 该用户所有的菜单数据 等等
    //             // 把数据存到 pinia
    //             // console.log(res.data);
    //             store.menus = res.data.menus;
    //             // 菜单数据回来了，可以生成动态路由了
    //             store.menusAll.forEach((parent) => {
    //                 const route: RouteRecordRaw = {
    //                     // parent是一级菜单，一级菜单对应一级路由
    //                     path: "/" + parent.name,
    //                     name: parent.name,
    //                     // 注意： 所有的一级路由其实都是对应 home/index.vue
    //                     component: () => import("../views/Home/index.vue"),
    //                     children: [],
    //                 };
    //                 //   然后添加子路由
    //                 parent.children?.forEach((child) => {
    //                     route.children.push({
    //                         // path ===>  /一级/二级
    //                         path: `/${parent.name}/${child.name}`,
    //                         name: child.name,
    //                         component: () =>
    //                             import(`../views/${parent.name}/${child.name}.vue`),
    //                     });
    //                 });
    //                 // addRoute方法添加路由配置不是同步生效的，需要我们等等再进入
    //                 router.addRoute(route);
    //             });
    //         }
    //     });

    //     // console.log('');
    //     // next如果传递参数，会再次触发 beforeEach 的执行
    //     next();
    // }
    else {
        // console.log(3);
        next()
    }

})

export default (app: App<Element>) => {
    app.use(router)
}

export { router }